﻿
<div data-bind="dialog: {autoOpen: false, width: 400, position: { my: 'left top', at: 'left bottom', of: $('#songInListsLink') } }, dialogVisible: songInListsDialog.dialogVisible" title="@ViewRes.Song.DetailsStrings.SongInLists">
	
	<div data-bind="foreach: songInListsDialog.categories">
		
		<h4 data-bind="text: categoryName"></h4>
		
		<!-- ko foreach: songLists -->
		
		<span>
			<a data-bind="text: name, attr: { href: vdb.utils.EntryUrlMapper.details('SongList', id) }"></a>
			<br />
		</span>

		<!-- /ko -->
		
		<br />
		
	</div>
	
	<!-- ko if: songInListsDialog.customLists -->
	
	<h4>@ViewRes.Song.DetailsStrings.CustomLists</h4>

	<!-- ko foreach: songInListsDialog.customLists -->
		
	<span>
		<a data-bind="text: name, attr: { href: vdb.utils.EntryUrlMapper.details('SongList', id) }"></a>
		(<span data-bind="text: author.name"></span>)
		<br />
	</span>		

	<!-- /ko -->

	<!-- /ko -->

</div>
